<template>
    <div class="course-list-page">
        <TopNav title="选择课程" :showBack="false" :showAdd="false" />

        <van-list class="course-list"
                v-model="loading"
                :finished="finished"
                finished-text="没有更多课程了"
                @load="onLoad"
        >
            <div class="course-item" v-for="product in products" :key="product.id">
                <img class="course-img" :src="product.imageHead" alt="" />
                <div class="course-info">
                    <h3>{{ product.title }}</h3>
                    <p>培训周期：{{ product.trainingPeriod }}</p>
                    <p>授课方式：{{ product.teachingMethod === '10' ? '线上' : '线下' }}</p>
                    <p>本月报名：{{ product.signUp }}人</p>
                    <div class="price">
                        <span class="current">￥{{ product.price }}</span>
                        <span class="origin">￥{{ product.originalPrice }}</span>
                        <button class="btn" @click="signUp(product)">立即报名</button>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import { getProductList } from "@/api/index.js";

    export default {
        name:'HomePage',
        components: { TopNav },
        data() {
            return {
                products: [],
                loading: false,
                finished: false,
                currentPage: 1,
                pageSize: 20,
                total: 0
            };
        },
        methods: {
            async onLoad() {
                if (this.finished) return;

                this.loading = true;
                try {
                    const res = await getProductList({pageNum:this.currentPage, pageSize:this.pageSize});
                    const items = res.data;
                    this.total = res.total;

                    // 去重
                    const newItems = items.filter(
                        item => !this.products.some(p => p.id === item.id)
                    );

                    this.products = [...this.products, ...newItems];
                    this.currentPage++;

                    if (this.products.length >= this.total) {
                        this.finished = true;
                    }
                } catch (err) {
                    console.error("获取课程数据失败", err);
                } finally {
                    this.loading = false;
                }
            },
            signUp(product) {
                this.$router.push(`/product/applyProduct?productId=${product.id}`);
            }
        }
    };
</script>

<style scoped>
    .course-list-page {
        min-height: 100vh;
        background-color: #fff;
    }


    .course-list {
        padding: 10px;
        flex: 1;
        overflow-y: auto;

    }
    .course-item {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #f5f5f5;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 7px;
    }
    .course-img {
        width: 110px;
        height: 110px;
        border-radius: 6px;
        margin-right: 10px;
        object-fit: cover;
        margin-left: 5px;
    }
    .course-info {
        flex: 1;
    }
    .course-info h3 {
        margin: 0;
        font-size: 15px;
    }
    .course-info p {
        margin: 2px 0;
        font-size: 12px;
        color: #999;
    }
    .price {
        display: flex;
        align-items: center;
        margin-top: 4px;
    }
    .current {
        font-weight: bold;
        color: red;
        font-size: 14px;
        margin-right: 6px;
    }
    .origin {
        text-decoration: line-through;
        color: #aaa;
        font-size: 12px;
        margin-right: auto;
    }
    .btn {
        background: linear-gradient(135deg, #4a90e2, #50aee5);
        color: #fff;
        border: none;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 14px;
        margin-right: 5px;
    }
    .btn:active {
        background: #ffdcdc;
    }
    /* 底部导航栏 */
    .tabbar {
        display: flex;
        border-top: 1px solid #f0f0f0;
        background: #fff;
        height: 50px;
        flex-shrink: 0;
    }
    .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #666;
    }
    .tab-item.active {
        color: #1890ff;
    }
    .tab-item img {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
    }
</style>
